<template>
  <view class="map-container">
    <map :latitude="props.latitude" :longitude="props.longitude" :markers="markers" scale="13"
      style="width:100%;height:100%" @markertap="handleMarkerClick" />
    <!-- -->
    <cover-view class="info-popup"  v-if="showCard" :style="{ transform: `translateY(-80px)` }">
      <cover-view class="popup-content">
        <cover-view class="popup-header">
          <cover-view class="popup-title">{{ markerSelect?.deviceName || '请选择设备' }}</cover-view>
        </cover-view>
        <cover-view class="popup-body" :style="{ maxHeight: contentMaxHeight + 'px' }">
          <cover-view v-if="!activeMarker" class="empty-state">
            <cover-view class="empty-icon">⌖</cover-view>
            <cover-view class="empty-text">点击地图上的标记点查看详情</cover-view>
            
          </cover-view>

          <cover-view v-else class="info-list">
            <cover-view class="info-item">
              <cover-view class="item-label">水权量：</cover-view>
              <cover-view class="item-value">{{ liveDate['定量值'] }}m³/h</cover-view>

            </cover-view>
            <cover-view class="info-item">
              <cover-view class="item-label">累计流量：</cover-view>
              <cover-view class="item-value">{{ liveDate['正向累积'] }}m³/h</cover-view>
            </cover-view>
            <cover-view class="info-item">
              <cover-view class="item-label">瞬时流量：</cover-view>
              <cover-view class="item-value">{{ liveDate['瞬时流量'] }}m³/h</cover-view>
            </cover-view>
            <cover-view class="action-btn" @click="detailbyID">详情</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
      <cover-view class="close-btns" @click="closePopup">
              ×
            </cover-view>
    </cover-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { devicemapApi, lastdpbyIdApi } from "@/axios/pageApi/device"

const latitude = ref(39.822133);
const longitude = ref(108.7153);
const markers = ref([]);
const markerSelect = ref({})
const liveDate = ref({})
const showCard = ref(false);
const activeMarker = ref({});
const animationTranslateY = ref(200);
const contentMaxHeight = ref(0); // 内容区最大高度
const props = defineProps(["isMappage", "latitude", "longitude", "selectMarker"]);
onMounted(() => {
  const info = uni.getSystemInfoSync();
  // 内容区最大高度为屏幕高度的40%
  contentMaxHeight.value = info.windowHeight * 0.4;
  initMarker()
});
function detailbyID() {
  console.log('点击跳转');

  uni.navigateTo({
    url: `/pages/detailsPage/detailsPage?name=${markerSelect.value.id}`,
  });
}
async function initMarker() {
  let res = await devicemapApi()
  let markerArr = res.data
  let pointArr = (markerArr.map(item => { return item.proList }))
  let mergedArray = ((pointArr.reduce((acc, curr) => acc.concat(curr), [])).map(item => {return item.deviceList})).reduce((acc, curr) => acc.concat(curr), [])
  console.log(mergedArray,'====');
  
  markers.value = props.selectMarker ? [props.selectMarker] : mergedArray.map(item => { return { ...item, iconPath: item.online == 1 ? '/static/map/online.png' : '/static/map/offline.png' } })

}
function closePopup() {
  showCard.value = false
}
const handleMarkerClick = (e) => {
  if (props.isMappage) {
    markerSelect.value = markers.value.find(m => m.id === e.detail.markerId);
    if (markerSelect.value) {
      lastdpbyIdApi(markerSelect.value.imei).then(res => {
        activeMarker.value = res.data.devs[0].dps;
        activeMarker.value.forEach(item => {
          liveDate.value[item.title] = item.value
        });
        showCard.value = true;
        setTimeout(() => {
          animationTranslateY.value = 0;
        }, 50);
      })
    }
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.info-popup {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  transition: transform 0.3s ease;
}

.popup-content {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
  padding: 15rpx 0;
}

.popup-header {
  padding: 0 30rpx 15rpx;
  border-bottom: 1px solid #f5f5f5;
}

.close-btns {
  position: absolute;
  right: 30rpx;
  width: 1.8rem;
  font-size: 1.8rem;
  top: 0.15rem;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-body {
  padding: 30rpx;
  overflow-y: auto;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  color: #999;
}

.empty-icon {
  font-size: 60rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
}

.info-list {
  color: #333;
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.item-label {
  width: 160rpx;
  color: #666;
}

.item-value {
  flex: 1;
}

.action-btn {
  position: absolute;
  right: 0.9375rem;
  bottom: 1.4rem;
  width: 4.5rem;
  height: 2.5rem;
  background: #4e94e1;
  justify-content: center;
  color: white;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 1.65rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 122, 255, 0.3);
}
</style>